.blog {
  max-width: 1340px;
  height: auto;
  display: flex;
  overflow: hidden;
  width: 80%;
  margin: 25px auto;


  .blog-main {
    flex: 2;
    margin-bottom: 30px;
    padding: 18px 17px 15px;
    border: 1px solid #eaeaea;

    .blog-top {
      margin-top: 15px;
      margin-bottom: 15px;
      border-bottom: 1px solid #eaeaea;
    }

    .blog-content {

      margin-top: 27px;

      .blog-item {
        margin: 0 0 13px;
        border-bottom: 1px double #f0f0f0;
        word-wrap: break-word;
        height: auto;
        padding-bottom: 20px;
        cursor: pointer;

        .content {
          p {
            color: #797878 !important;
          }
        }


        .entry-tags {
          margin: 17px 0 0;
          width: 100%;
          max-width: 100%;
          line-height: 30px;
          display: flex;

          .categories {
            float: left;
            margin-right: 1%;
            padding: 5px;
          }

          .categories:hover {
            background-color: #f3f8ff;

          }

          .right {
            float: right;
          }

          .tags {
            float: left;
            margin-right: 1%;
          }

          .clear {
            display: block;
          }

        }

        .title {
          margin-bottom: 15px;
          font-size: 23px;
          letter-spacing: -.03em;
          word-wrap: break-word;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-weight: 700;
          color: #333;
          text-shadow: 0 1px 0 #fff;
          line-height: 1.1em;
        }


        .content {
          p {
            line-height: 1.7;
            color: #333;
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
          }
        }
      }
    }

  }

  .blog-nav {
    border: 1px solid #eaeaea;
    border-left: none;
    flex: 1;
    margin-bottom: 30px;

    .blog-nav-top {
      margin: 0;
      padding: 20px 25px 0;

      p {
        background: none repeat scroll 0 0 #f2f2f2;
        font-size: 16px;
        margin-bottom: 12px;
        padding-left: 10px;
        padding-top: 2px;
        padding-bottom: 2px;
        vertical-align: text-bottom;
        word-wrap: break-word;
        color: #333;
      }

      ul {
        padding: 0;
        margin: 0;

        li {
          background: url(https://learnercms.oss-cn-beijing.aliyuncs.com/course/2021/12/01/f4cdd587-bb0c-4c53-8a8c-7ae7cc1d3f16.png) no-repeat 0 16px;
          padding: 6px 0 6px 15px;
          height: 56px;
          cursor: pointer;

          .blog-nav-top-title {
            text-decoration: none;
            color: #333;
            font-size: 14px;
            line-height: 1.7;
          }

          .blog-nav-top-bottom {
            text-decoration: none;
            color: #333;
            font-size: 14px;
            line-height: 1.7;

            div {
              float: left;
              margin-right: 15px;
            }
          }
        }
      }
    }

  }

  ::v-deep .el-breadcrumb {
    margin-top: 25px;
  }
}